.ChatRoomContainer {
  display: flex;
  flex-direction: column;
  height: 100%;

  .ChatRoomContainer-main {
    flex: 1;
    overflow: auto;
  }


  //聊天室卡片
  .chat-room {
    padding: 1rem;

    > li {
      display: flex;
      overflow: hidden;
      width: 100%;
      aspect-ratio: 3.14/1;
      border: 0.3cqw solid var(--border-color);
      border-radius: 2cqw;
      cursor: pointer;
      background-color: var(--background-color-white);
      margin-bottom: 1rem;

      .cover {
        height: 100%;
        aspect-ratio: 1;
        overflow: hidden;

        > img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .content {
        padding: 2% 1%;
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 3cqw;
        box-shadow: -1cqw 0 3cqw 3cqw rgb(255, 255, 255);

        > p:nth-child(1) {
          font-size: 150%;
        }

        > p:nth-child(2) {
          font-size: 90%;
          color: var(--text-color-gray);
        }

        > .name {
          color: var(--gray-30);

          .living-icon {
            width: 1em;
            height: 1em;
            margin-right: 0.5rem;
            float: left;

            .living-icon-col {
              background-color: var(--red-40);
            }
          }
        }

        > .user-list {
          ul {
            li {
              max-width: 8cqw;
            }
          }
        }
      }
    }

  }

  .user-list {
    height: 30%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    ul {
      flex: 1;
      margin-right: 10%;
      height: 100%;
      display: flex;
      flex-wrap: nowrap;
      flex-direction: row-reverse;
      justify-content: flex-end;

      li {
        width: 100%;
        position: relative;

        img {
          position: absolute;
        }
      }
    }

    p {
      color: var(--cobalt-30);
    }
  }

  .leisure-member {
    height: 11cqw;
    box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
    z-index: 1;

    > div:nth-child(1) {
      float: left;
      width: 10cqw;
      font-size: 5cqw;
      height: 100%;
      color: var(--conifer-60);
      box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2), /* 第一层阴影：浅色阴影，增加轻微立体感 */
      2px 2px 4px rgba(255, 255, 255, 0.8);
    }

    .user-list {
      height: 100%;
      padding: 0.5% 1%;

      ul {
        width: 100%;
        margin-right: 0;
        overflow: hidden;


        li {
          width: 9cqw;
          margin-right: 1%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          img {
            width: 8cqw;
            height: auto;
            margin: 0 auto 0 0.5cqw;
          }

          p {
            position: absolute;
            font-size: 1.5cqw;
            width: 9cqw;
            bottom: 10%;
            text-align: center;
            color: white;
            border-radius: 5%;
            backdrop-filter: blur(5px);
            background-color: rgba(0, 0, 0, 0.5);
          }
        }
      }
    }


  }
}